<template>
  <el-container class="height100 ">
    <el-main class="el-mainContent paddingTRL0">
    <el-form ref="form" :model="content" label-position="top" label-width="180px" size="mini">
    <div class="partContent    ">
      <div class="part padding0">
     <div class="obpm-fromContent-title obpm-enterpriseDomain-logo clearfix   emailHeader">
      <el-col :span="12" class="normalLineH">
        <i class="iconfont icon-icon_yxsz_off" aria-hidden="true"></i>
        <span>{{$t('emailconfig')}}</span>
      </el-col>
      <el-col :span="12" class="obpm-oneBtn normalLineH" style="text-align:right">
        <el-button type="primary" @click="onSaveBtnClick" size="small">{{$t('save')}}</el-button>
      </el-col >
    </div>
     </div>
    <!-- <div  class="width100 overflowy"> -->

        <!-- <el-divider content-position="left">系统邮件发送设置</el-divider> -->
          <div class="part">
        <p class="smallHeader">{{$t('mail_setting')}}</p>
        <el-row>
          <el-col :span="5">
            <el-form-item :label="$t('sendHost')" class="  ">
              <el-input v-model="content.sendHost"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="6">
            <el-form-item :label="$t('sendAddress')" class="  ">
              <el-input v-model="content.sendAddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">
            <el-form-item :label="$t('sendAccount')" class="  ">
              <el-input v-model="content.sendAccount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="6">
            <el-form-item :label="$t('sendPassword')" class="  ">
              <el-input v-model="content.sendPassword" show-password></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">
            <el-form-item :label="$t('ccAddress')" class="  ">
              <el-input v-model="content.ccAddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </div>
        <div class="part">
        <p class="smallHeader">{{$t('base_setting')}}</p>
        <el-row>
          <el-col :span="5">
            <el-form-item :label="$t('isUseClient')">
              <!-- <el-switch v-model="content.isUseClient"  active-value="true" inactive-value="false" @change="changeUseClient"></el-switch> -->
              <el-radio v-model="content.isUseClient" label="true">是</el-radio>
              <el-radio v-model="content.isUseClient" label="false">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="5"  :offset="6">
            <el-form-item :label="$t('functionDomain')" class="  ">
              <el-input v-model="content.functionDomain" :disabled="!isUse"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <p class="smallHeaderNoBorder  ">{{$t('file_mapping')}}</p>
        <el-row>
          <el-col :span="5">
            <el-form-item :label="$t('trash')" class="  ">
              <el-input v-model="content.trash" :disabled="!isUse"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="6">
            <el-form-item :label="$t('sender')" class="  ">
              <el-input v-model="content.sender" :disabled="!isUse"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">
            <el-form-item :label="$t('draft')" class="  ">
              <el-input v-model="content.draft" :disabled="!isUse"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="6">
            <el-form-item :label="$t('removed')" class="  ">
              <el-input v-model="content.removed" :disabled="!isUse"></el-input>
            </el-form-item>
          </el-col>
        </el-row></div>
        <div class="part">
        <p class="smallHeader">{{$t('fetchssl')}}</p>
        <p class="smallHeaderNoBorder  ">{{$t('fetchServer_config')}}</p>
        <el-row>
          <el-col :span="5">
            <el-form-item :label="$t('fetchServer')" class="  ">
              <el-input v-model="content.fetchServer" :disabled="!isUse"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="6">
            <el-form-item :label="$t('fetchServerPort')" class="  ">
              <el-input v-model="content.fetchServerPort" :disabled="!isUse"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">
            <el-form-item :label="$t('fetchProtocol')">
              <el-input v-model="content.fetchProtocol" :disabled="!isUse"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="6">
            <el-form-item :label="$t('fetchssl')"  >
              <!-- <el-switch v-model="content.fetchssl"  active-value="true" inactive-value="false" :disabled="!isUse"></el-switch> -->
              <el-radio v-model="content.fetchssl" label="true">是</el-radio>
              <el-radio v-model="content.fetchssl" label="false">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <p class="smallHeaderNoBorder  ">{{$t('send_serve_config')}}</p>
        <el-row>
          <el-col :span="5">
            <el-form-item :label="$t('smtpServer')">
              <el-input v-model="content.smtpServer" :disabled="!isUse"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="6">
            <el-form-item :label="$t('smtpServerPort')">
              <el-input v-model="content.smtpServerPort" :disabled="!isUse"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">
            <el-form-item :label="$t('smtpAuthenticated')"  >
              <!-- <el-switch v-model="content.smtpAuthenticated" :disabled="!isUse" active-value="true" inactive-value="false"></el-switch> -->
              <el-radio v-model="content.smtpAuthenticated" label="true">是</el-radio>
              <el-radio v-model="content.smtpAuthenticated" label="false">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="6">
            <el-form-item :label="$t('smtpssl')"  >
              <!-- <el-switch v-model="content.smtpssl" :disabled="!isUse" active-value="true" inactive-value="false"></el-switch> -->
              <el-radio v-model="content.smtpssl" label="true">是</el-radio>
              <el-radio v-model="content.smtpssl" label="false">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        </div>
    </div>
    <!-- </div> -->
   </el-form>
    </el-main>
  </el-container>
</template>
<script>
export default {
  created() {
    this.$api.getEmailConfig(this.$route.query.domainid, {
      onSucess: resp => {
        this.content = resp.data.data;
        if(this.content.isUseClient=="true"){
          this.isUse=true;
        }
      }
    });
  },
  data() {
    return {
      scrollHeight: null ,
      content: {},
      isUse:false,
    };
  },

  methods: {
    changeUseClient(val){
      if(val=="false"){
        this.isUse=false;
      }else{
        this.isUse=true;

      }
    },
    onSaveBtnClick(){
      let domainid = this.$route.query.domainid;
      this.$api.updateEmailConfig(domainid, this.content, {
        onSucess: resp => {
          if (resp && resp.data.errcode == 0) {
            this.$message({
              showClose: true,
              message: this.$t('msg_save_success'),
              type: "success"
            });
            this.$api.getEmailConfig(this.$route.query.domainid, {
              onSucess: resp => {
                this.content = resp.data.data;
              }
            });
          } else {
            this.$message({
              showClose: true,
              message: resp.data.errmsg,
              type: "error"
            });
          }
        }
      });
    }
  },
  mounted(){
    this.scrollHeight=(document.documentElement.clientHeight || document.body.clientHeight) - 90
  },
};
</script>

<style>
</style>